import React, { useState } from 'react';
import { NavLink } from 'react-router-dom';
import {
    HomeOutlined,
    ApartmentOutlined,
    TableOutlined,
    CalendarOutlined,
    BellOutlined,
    EnvironmentOutlined,
    UserOutlined
} from '@ant-design/icons';
import './css/sidebar.less';

const links = [
    { to: '/admin/home', icon: <HomeOutlined /> },
    { to: '/admin/devices', icon: < ApartmentOutlined /> },
    { to: '/admin/settings', icon: <TableOutlined /> },
    { to: '/admin/date', icon: <CalendarOutlined /> },
    // { to: '/admin/construction', icon: <UserOutlined /> },
    // { to: '/admin/location', icon: <EnvironmentOutlined /> },
    { to: '/admin/emergency', icon: <BellOutlined /> }
];

export default function Sidebar() {
    const [activeIndex, setActiveIndex] = useState(0); // 默认选中第一个图标

    const handleClick = (index) => {
        setActiveIndex(index); // 点击后更新高亮的图标
    };

    return (
        <div className="sidebar">
            {links.map(({ to, icon }, index) => (
                <NavLink
                    key={index}
                    to={to}
                    className={`icon ${index === activeIndex ? 'active' : ''}`} // 高亮选中的图标
                    onClick={() => handleClick(index)} // 点击后设置高亮
                >
                    {icon}
                </NavLink>
            ))}
        </div>
    );
}
